@import "nib"
@import "_variables"
@import "_extend"

global-reset()

html
  font-size font-size

body
  background-color color-background
  color color-text
  font-family font-sans
  -webkit-font-smoothing antialiased
  line-height line-height
  padding-top 4rem + 3 * gutter-size

a
  position relative
  color color-text
  text-decoration none
  transition color .2s ease

  &:hover
    color color-link

#backToTop
  position fixed
  z-index 999
  bottom gutter-size * 2
  left 50%
  margin-left container-width * .5 + gutter-size * 2
  background-color color-article-background
  width gutter-size * 2
  height gutter-size * 2
  transition all .2s ease-in-out
  display flex
  align-items center
  justify-content center
  opacity 0
  cursor pointer

  &.show
    opacity 1

  &:hover
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.07)

    .back-arrow-right
      transform: rotate(45deg) translate(-3px, 0px);

    .back-arrow-left
      transform: rotate(-45deg) translate(3px, -0px);

  .back-arrow
    background-color color-link
    width .7 * gutter-size
    height 2px
    transition all .2s ease-in-out

  .back-arrow-right
    transform: rotate(30deg) translate(-2px, 0px);

  .back-arrow-left
    transform: rotate(-30deg) translate(2px, -0px);


.container
  width container-width
  margin 0 auto
  box-sizing border-box

  @media mq-mobile
    width 100%
    padding 0 1rem

@import "_partial/header"
@import "_partial/footer"
@import "_partial/aboutme"
@import "_partial/article"
@import "_partial/archive"
@import "_partial/highlight"
